<template>
	<view class="container">
		<view class="cellGroup">
			<view class="cell b-b">
				<text class="tit">景点名称</text>
				<input type="text" disabled v-model="title" />
			</view>
			<view class="cell" @tap="timeShow">
				<text class="tit">预约时间</text>
				<input type="text" disabled v-model="booktimestr" placeholder="请选择时间" placeholder-class="grey" />
			</view>
		</view>
		<view class="btn" @tap="submit">确认</view>
		<date-time-picker ref='date-time' type="datetime" datestring="00" :endYear="2030" :startYear="2020" @change='dateTimeChange'></date-time-picker>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import {
		travelScenicUserReserve
	} from "@/api/user.js";
	export default {
		components: {
			DateTimePicker
		},
		data() {
			return {
				title: "",
				utcid: "",
				id: "",
				booktimestr: ""
			};
		},
		onLoad(options) {
			this.title = options.title
			this.id = options.id
			this.utcid = uni.getStorageSync("tourismCardNo")
		},
		methods: {
			timeShow() {
				this.$refs['date-time'].show();
			},
			dateTimeChange(e) {
				this.booktimestr = e + ":00"
				console.log(this.booktimestr)
			},
			submit() {
				uni.showLoading({
					mask: true
				})
				travelScenicUserReserve({
					utcid: this.utcid,
					id: this.id,
					booktimestr: this.booktimestr
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: "预约成功,请等待出票",
						duration: 1000
					})
					setTimeout(function() {
						uni.navigateBack({

						})
					}, 1000)
				})
			}
		}
	};
</script>
<style>
	page {
		background-color: #fafafa;
	}
</style>
<style lang="scss" scoped>
	.grey {
		font-weight: normal;
		color: #ccc;
	}

	.container {
		padding-bottom: 70rpx;

		.cellGroup {
			background-color: #fff;
			border-top: 10rpx solid #fafafa;

			.title {
				padding: 0 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #FAFAFA;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.cell {
				margin: 0 30rpx;
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				position: relative;

				.tit {
					height: 100rpx;
					line-height: 100rpx;
					min-width: 150rpx;
					width: 150rpx;
				}

				input {
					width: 460rpx;
					height: 100rpx;
					line-height: 100rpx;
				}
			}

			.b-b {
				border-bottom: 1rpx solid #eee;
			}
		}

		.btn {
			margin: 150rpx auto 0;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #FBCC2B 0%, #FBDC72 100%);
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}
</style>
